<script>
import { createLogger, mapState } from "vuex";
import moment from "moment";
import BaseRecordGroup from "./BaseRecordGroup";
import BaseRecordItem from "./BaseRecordItem";
import { Loading } from "element-ui";
export default {
  name: "sidebar",
  props: ["userId", "name"],
  components: {
    BaseRecordGroup,
    BaseRecordItem,
  },
  inject: {
    IMUI: {
      from: "IMUI",
      default() {
        return this;
      },
    },
  },
  data() {
    return {
      isShow: false,
      active: 1,
      imageUrl: "",
      options: [],
      group: "常用回复",
      option: [
        {
          value: "常用回复",
          label: "常用回复",
        },
      ],
      content: "",
      id: "",
      current: null,
      dialogTableVisible: false,
      form: {},
      activeName: "0",
      dialogVisible: false,
      checkList: [],
      admins: [],
      status: false,
      noReminderStatus: false,
      outerVisible: false,
      innerVisible: false,
      groupList: [],
      filterValue: "",
      filterData: [],
      currentContact: {},
      allRecords: [],
      fileRecords: [],
      imageRecords: {},
      contextRecords: [],
      recordLoading: false,
      recordPageId: 1,
      value: "",
      userGroupValue: "",
      userGroupList: [],
      newId: [],
      type: "",
      currentContextId: "",
    };
  },
  computed: {
    ...mapState(["current_contact", "user"]),
  },
  watch: {
    current_contact: {
      handler(newVal) {
        this.active = 1;
        this.status = !!newVal.toppingTime;
      },
      immediate: true,
    },
    value(newVal) {
      if (!newVal) {
        this.getRecord(this.activeName);
      }
    },
  },
  mounted() {
    this.find();
    this.GetAdmin();
  },
  methods: {
    handleDialogeClose() {
      this.activeName = "0";
      this.recordPageId = 1;
    },
    //给自定义群组添加成员
    async handleUserGroupAccount() {
      if (this.checkList.length == 0) {
        this.innerVisible = false;
        this.$message.error("请选择联系人！");
        return;
      }
      if (this.current_contact.type === 3) {
        this.checkList.filter((item) => {
          this.newId.push(item.id);
        });
        const result = await this.$API.admins.addUserGroupAccount({
          userGroupId: this.current_contact.id,
          newMemberAccountIdList: this.newId,
        });
        this.$emit("addUserGroupAccount", result.result);
        this.newId = [];
        const accountResult = await this.$API.admins.refUserGroupAccount(
          this.current_contact.id,
          this.userId,
          this.name
        );
        this.userGroupList =
          accountResult.result &&
          accountResult.result.accountList.map((item) => {
            item.label = item.realName;
            return item;
          });
        this.innerVisible = false;
        this.dialogVisible = false;
        this.checkList = [];
      } else {
        this.innerVisible = true;
      }
    },
    //将话术添加到聊天框
    addSpeak({ content }) {
      this.IMUI.setEditorValue(content);
    },
    handleBack() {
      this.recordPageId = 1;
      this.currentContextId = "";
    },
    handleScrollTop(data, id) {
      this.$nextTick(() => {
        const index = data.findIndex((item) => item.id == id);
        this.$refs.wrapRef.$el.scrollTop =
          this.$refs.wrapRef.$children[index].$el.offsetTop - 60;
        this.currentContextId = id;
      });
    },
    handleScrollBottom() {
      this.$nextTick(() => {
        this.$refs.recordGroupRef.$el.scrollTop =
          this.$refs.recordGroupRef.$el.scrollHeight;
      });
    },
    async clickContext(data) {
      this.recordPageId = 2;
      if (this.current_contact.type === 1) {
        const result = await this.$API.admins.getContext(
          data.fromUserAccount,
          data.toUserAccount,
          data.id,
          500,
          2,
          500,
          1
        );
        if (result.code === 200) {
          this.contextRecords = result.result;
          this.handleScrollTop(result.result, data.id);
        }
      } else if (this.current_contact.type === 2) {
        const result = await this.$API.admins.getGroupContext(
          data.id,
          this.name,
          500,
          2,
          500,
          1
        );
        if (result.code === 200) {
          this.contextRecords = result.result;
          this.handleScrollTop(result.result, data.id);
        }
      } else if (this.current_contact.type === 3) {
        const result = await this.$API.admins.getUserGroupContext(
          data.id,
          this.name,
          500,
          2,
          500,
          1
        );
        if (result.code === 200) {
          this.contextRecords = result.result;
          this.handleScrollTop(result.result, data.id);
        }
      }
    },
    //查找用户聊天记录
    async searchMessage(type) {
      if (this.current_contact.type === 1) {
        const result = await this.$API.admins.userSearchMessage({
          content: this.value,
          fromUserAccount: this.name,
          pageNo: 1,
          pageSize: 500,
          toUserAccount: this.current_contact.id,
          type: type,
        });
        if (result.code === 200) {
          this.allRecords = result.result;
          this.fileRecords = result.result;
        }
      } else if (this.current_contact.type === 2) {
        const result = await this.$API.admins.groupSearchMessage({
          content: this.value,
          fromUserAccount: this.name,
          groupId: this.current_contact.id,
          pageNo: 1,
          pageSize: 500,
          type: type,
        });
        if (result.code === 200) {
          console.log("tag", result.result);
          this.allRecords = result.result;
          this.fileRecords = result.result;
        }
      } else if (this.current_contact.type === 3) {
        const result = await this.$API.admins.userGroupSearchMessage({
          content: this.value,
          fromUserAccount: this.name,
          userGroupId: this.current_contact.id,
          pageNo: 1,
          pageSize: 500,
          type: type,
        });
        if (result.code === 200) {
          this.allRecords = result.result;
          this.fileRecords = result.result;
        }
      }
    },
    // 获取聊天记录
    async getRecord(type) {
      this.dialogTableVisible = true;
      this.value = "";
      this.type = type;
      if (this.current_contact.type === 1) {
        // 一对一聊天记录
        const fromUserAccount = this.user.username;
        const toUserAccount = this.current_contact.id;
        const params = `${fromUserAccount}/${toUserAccount}/${500}/${1}/${type}`;
        this.recordLoading = true;
        //获取聊天记录
        const result = await this.$API.admins.getMessage(params);
        this.recordLoading = false;
        if (result.code === 200) {
          if (type == 0) {
            this.allRecords = result.result;
          }
          if (type == 2) {
            this.fileRecords = result.result;
          }
          if (type == 3) {
            this.imageRecords = this.formatData(result.result);
          }
        }
      } else if (this.current_contact.type === 2) {
        //默认群聊天记录
        const groupId = this.current_contact.id;
        const fromUserAccount = this.name;
        const params = `${groupId}/${fromUserAccount}/${500}/${1}/${type}`;
        this.recordLoading = true;
        const result = await this.$API.admins.GroupMessage(params);
        console.log("tag", result);
        this.recordLoading = false;
        if (result.code === 200) {
          if (type == 0) {
            this.allRecords = result.result;
          }
          if (type == 2) {
            this.fileRecords = result.result;
          }
          if (type == 3) {
            // this.imageRecords = result.result;
            this.imageRecords = this.formatData(result.result);
          }
        }
      } else if (this.current_contact.type === 3) {
        //自定义群聊天记录
        const userGroupId = this.current_contact.id;
        const fromUserAccount = this.name;
        const params = `${userGroupId}/${fromUserAccount}/${500}/${1}/${type}`;
        this.recordLoading = true;
        const result = await this.$API.admins.userGroupMessage(params);
        this.recordLoading = false;
        if (result.code === 200) {
          if (type == 0) {
            this.allRecords = result.result;
          }
          if (type == 2) {
            this.fileRecords = result.result;
          }
          if (type == 3) {
            this.imageRecords = this.formatData(result.result);
          }
        }
      }
      this.handleScrollBottom();
    },
    formatData(imgList) {
      const result = {};
      var today = moment().startOf("day");
      var yesterday = moment().subtract(1, "days").startOf("day");
      imgList.forEach((item) => {
        const createTime = item.createTime;
        const _today = moment(createTime).isSame(today, "d");
        const _yestoday = moment(createTime).isSame(yesterday, "d");
        if (_today) {
          if (!result["今天"]) {
            result["今天"] = [item];
          } else {
            result["今天"].push(item);
          }
        } else if (_yestoday) {
          if (!result["昨天"]) {
            result["昨天"] = [item];
          } else {
            result["昨天"].push(item);
          }
        } else {
          if (!result[moment(createTime).format("YYYY-MM-DD")]) {
            result[moment(createTime).format("YYYY-MM-DD")] = [item];
          } else {
            result[moment(createTime).format("YYYY-MM-DD")].push(item);
          }
        }
      });

      return result;
    },
    handleClick() {
      this.getRecord(this.activeName);
    },
    cancelMembers({ id }) {
      const index = this.checkList.findIndex((item) => item.id === id);
      if (index >= 0) {
        this.checkList.splice(index, 1);
      }
    },
    filterChange(value) {
      this.filterData = this.admins.filter(
        (item) =>
          item.realName.indexOf(value) !== -1 ||
          item.pinYin.indexOf(value) !== -1
      );
    },
    //置顶联系人
    top() {
      const status = this.status ? 1 : 0;
      this.$emit("top", status);
    },

    //消息免打扰
    handleNoReminder() {
      const noReminderStatus = this.noReminderStatus ? 1 : 0;
      this.$emit("noReminder", noReminderStatus);
    },

    //获取所有联系人
    async GetAdmin() {
      let y = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      const result = await this.$API.admins.getAdmins();
      let i = 0;
      let res = result.result.map((item, index) => {
        if (index === 0 && item.capitalInitial !== y[i]) {
          i++;
        }
        if (item.capitalInitial === y[i]) {
          item.capitalInitial = item.capitalInitial;
          i++;
        } else if (item.capitalInitial === y[i - 1]) {
          item.capitalInitial = "";
        } else {
          i++;
        }
        return item;
      });
      this.admins = result.result;
    },
    changeCheckBox(checked, data) {
      if (checked) {
        // 选中
        this.checkList.push(data);
      } else {
        // 取消选中
        const index = this.checkList.findIndex((item) => item.id === data.id);
        this.checkList.splice(index, 1);
      }
    },
    async tab(key) {
      this.active = key;
      this.noReminderStatus = !!this.current_contact.noReminder;
      if (this.current_contact.type === 2) {
        console.log("tag", this.current_contact.id, this.name);
        const result = await this.$API.admins.getOrganization(
          this.current_contact.id,
          this.userId,
          this.name
        );
        this.groupList = result.result && result.result.children;
      } else if (this.current_contact.type === 3) {
        const result = await this.$API.admins.refUserGroupAccount(
          this.current_contact.id,
          this.userId,
          this.name
        );
        this.userGroupList =
          result.result &&
          result.result.accountList.map((item) => {
            item.label = item.realName;
            return item;
          });
      }
      // if (key === 2 && this.contact.type === 1) {
      //   const result = await this.$API.admins.getOrganization(this.contact.id);
      //   this.groupList = result.result.children;
      // } else if( key === 1 && this.contact.type === 2) {
      //   this.currentContact = this.contact
      // }
    },
    async elastic() {
      this.innerVisible = false;
      this.dialogVisible = true;
      const newMemberAccountIdList = [
        this.current_contact.privateId,
        this.userId,
        ...this.checkList.map((item) => item.id),
      ];
      if (!this.userGroupValue) {
        this.$message.error("请输入群名！");
        return;
      }
      const result = await this.$API.admins.userGroup({
        name: this.userGroupValue,
        newMemberAccountIdList,
      });
      if (result.code === 200) {
        this.checkList = [];
        this.userGroupList = [];
        this.$emit("createGroup", this.userGroupValue, result.result);
      }
      this.handleClose();
      this.userGroupValue = "";
    },
    handleClose() {
      this.checkList = [];
      this.filterValue = "";
      this.dialogVisible = false;
    },
    //清空聊天记录
    open() {
      this.$confirm("清空聊天记录?", {
        confirmButtonText: "清空",
        cancelButtonText: "取消",
        center: true,
        customClass: "msgBox",
      })
        .then(async () => {
          const contact_id = this.current_contact.id;
          if (this.current_contact.type === 1) {
            const result = await this.$API.admins.emptyChat(
              this.name,
              contact_id
            );
            if (result.code === 200) {
              this.$emit("clearMessages", contact_id);
            }
          } else if (this.current_contact.type === 2) {
            const result = await this.$API.admins.emptyGroupChat(
              contact_id,
              this.userId,
              this.name
            );
            if (result.code === 200) {
              this.$emit("clearMessages", contact_id);
            }
          } else if (this.current_contact.type === 3) {
            const result = await this.$API.admins.emptyUserGroupChat(
              contact_id,
              this.userId,
              this.name
            );
            if (result.code === 200) {
              this.$emit("clearMessages", contact_id);
            }
          }
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //退出群聊
    async handleUserGroup() {
      if (this.current_contact.type === 3) {
        const result = await this.$API.admins.quitUserGroup(
          this.current_contact.id,
          this.userId,
          this.name
        );
        if (result.code === 200) {
          this.$emit("quitUserGroup", result.result);
          this.checkList = [];
          this.userGroupList = [];
        }
      }
    },
    show() {
      this.isShow = true;
    },
    close() {
      this.isShow = false;
      this.current = null;
      this.clear();
    },
    //添加话术
    async add() {
      if (!this.current) {
        if (!this.content) {
          this.$message.error("话术内容不能为空！");
          return;
        }
        const result = await this.$API.dialogue.add({
          content: this.content,
          accountId: this.userId,
          group: "常用回复",
        });
        if (result.code == 200) {
          this.close();
          this.clear();
          this.find();
        }
      } else {
        this.update();
        this.clear();
        if (this.current == null) {
        }
      }
    },
    //返回话术
    async find() {
      const result = await this.$API.dialogue.find({
        accountId: this.userId,
        // content: this.content,
        group: "常用回复",
      });
      if (result.code == 200) {
        this.options = result.result;
      }
    },
    //删除话术
    async remove(id) {
      const result = await this.$API.dialogue.delete(id);
      this.find();
    },
    handleUpdate(item) {
      this.current = item;
      this.group = item.group;
      this.content = item.content;
      this.id = item.id;
      this.isShow = true;
    },
    //修改话术
    async update() {
      if (!this.content) {
        this.$message.error("输入框不能为空！");
        return;
      }
      const result = await this.$API.dialogue.update({
        content: this.content,
        accountId: this.current.accountId,
        group: "常用回复",
        id: this.current.id,
      });
      if (result.code == 200) {
        this.close();
        this.find();
      }
    },
    //话术置顶
    async topping(id) {
      const result = await this.$API.dialogue.topping(id);
      this.find();
    },
    //清空
    clear() {
      this.group = "";
      this.content = "";
      this.id = "";
    },

    //查询聊天记录
    async query() {
      const reuslt = await this.$API.dialogue.message();
    },
    //下载图片
    checkImage() {
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
          "el-image-viewer__actions__inner"
        );
        let downImg = document.createElement("i");
        downImg.setAttribute("class", "el-icon-download");
        wrapper[0].appendChild(downImg);
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0];
          this.cusClickHandler();
        }
      });
    },
    cusClickHandler() {
      this.wrapperElem.addEventListener("click", this.hideCusBtn);
    },
    hideCusBtn(e) {
      let className = e.target.className;
      if (className === "el-icon-download") {
        let imgUrl = document.getElementsByClassName(
          "el-image-viewer__canvas"
        )[0].children[0].src;
        this.downloadImage(imgUrl, 3);
      }
    },
    downloadImage(imgUrl, type) {
      let fileNameArray = imgUrl && imgUrl.split("/");
      //开启遮罩层
      let loadingInstance = Loading.service({
        lock: true, //lock的修改符--默认是false
        text: "正在下载文件，请耐心等待", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色
        target: document.querySelector("#futureTransferDialog"), //loadin覆盖的dom元素节点
      });

      let downloadFileName = undefined;
      if (fileNameArray.length == 1) {
        downloadFileName = fileNameArray[0];
      } else {
        downloadFileName = fileNameArray[fileNameArray.length - 1];
      }
      // 下载文件
      this.$API.admins
        .fileDownload({ filename: downloadFileName, type })
        .then((response) => {
          //关闭遮罩层
          console.log("tag", response);
          loadingInstance.close();
          const blob = new Blob([response], { type: "" });
          saveAs(blob, imgUrl);
        })
        .catch((error) => {
          //关闭遮罩层
          loadingInstance.close();
          this.$message.error(error);
        });
    },
  },
};
</script>
<template>
  <div class="slot-group">
    <div class="top">
      <div class="button">
        <el-button
          plain
          class="btn"
          :class="{ Cclass: active == 1 }"
          @click="tab(1)"
          >快捷服务</el-button
        >
        <el-button
          plain
          class="btn"
          :class="{ Cclass: active == 2 }"
          @click="tab(2)"
          >服务助手</el-button
        >
      </div>
    </div>

    <div v-show="active === 1" class="sidebar-content">
      <div class="CommonReply">
        <div>常用回复</div>
      </div>
      <div class="information">
        <div class="speak" v-for="(item, index) in options" :key="index">
          <span class="num">{{ index + 1 }}.</span>
          <p @click="addSpeak(item)">{{ item.content }}</p>
          <div class="tool">
            <span class="el-icon-upload2" @click="topping(item.id)"></span>
            <span
              class="el-icon-edit-outline"
              @click="handleUpdate(item)"
            ></span>
            <span class="el-icon-delete" @click="remove(item.id)"></span>
          </div>
        </div>
      </div>
      <div class="card" v-show="isShow">
        <div class="card-top">
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin: 3px 0 9px;
            "
          >
            <span class="add">{{ current ? "修改话术" : "添加话术" }}</span>
            <i class="el-icon-close" @click="close"></i>
          </div>
          <el-divider></el-divider>
          <!-- <el-button
            @click="close"
            class="X"
            icon="el-icon-close"
            type="info"
            size="mini"
          ></el-button> -->
        </div>
        <div class="menu">
          <div class="group">话术分组:</div>
          <!-- <el-select
            v-model="group"
            placeholder="常用回复"
            size="small"
            style="margin: 5px 0 6px 15px; width: 200px"
          >
            <el-option
              v-for="item in option"
              :key="item.value"
              :value="item.value"
            >
            </el-option> </el-select
          > -->
          <el-input
            value="常用回复"
            :disabled="true"
            size="small"
            style="margin: 5px 0 6px 15px; width: 200px"
          ></el-input>
          <br />
          <div class="content">话术内容：</div>
          <el-input
            class="input"
            type="textarea"
            v-model="content"
            maxlength="200"
            show-word-limit
            placeholder="请输入话术内容"
            style="margin: 5px 0 0 14px; width: 200px"
          ></el-input>
        </div>
        <div class="bottom">
          <el-button type="info" class="cancel" @click="close" size="mini"
            >取消</el-button
          >
          <el-button type="primary" class="increase" @click="add" size="mini">{{
            current ? "修改" : "添加"
          }}</el-button>
        </div>
      </div>
      <div class="sidebar-footer">
        <el-button type="text" icon="el-icon-circle-plus-outline" @click="show"
          >添加话术</el-button
        >
      </div>
    </div>

    <div v-show="active === 2">
      <div class="assistant">
        <div class="assistant-group">
          <div
            class="group-members-item"
            v-if="current_contact.type === 1"
            key="type2"
          >
            <div class="pic">{{ current_contact.avatar }}</div>
            <div class="surname">{{ current_contact.avatar }}</div>
          </div>
          <div
            v-for="(item, index) in current_contact.type === 2
              ? groupList
              : current_contact.type === 3
              ? userGroupList
              : []"
            :key="index"
            class="group-members-item"
          >
            <div class="pic">{{ item.label.substr(-2) }}</div>
            <div class="surname">{{ item.label.substr(-2) }}</div>
          </div>
          <div class="group-members-item">
            <div
              v-if="
                this.current_contact.type !== 2 &&
                this.current_contact.type !== 4
              "
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              @click="dialogVisible = true"
            >
              <i class="el-icon-plus avatar-uploader-icon add-group-btn"></i>
              <div class="surname">添加</div>
            </div>
          </div>
        </div>
        <div class="upload">
          <el-dialog
            :modal="false"
            :visible.sync="dialogVisible"
            style="z-index: 2005"
            width="500px"
            top="25"
            :footer="false"
            @close="handleClose"
          >
            <div class="members-box">
              <div class="members-left">
                <div class="members-filter">
                  <el-input
                    v-model="filterValue"
                    placeholder="搜索"
                    size="mini"
                    icon="el-icon-search"
                    style="width: 100%"
                    @input="filterChange"
                  ></el-input>
                </div>
                <div class="members-list">
                  <div
                    style="margin-bottom: 15px"
                    v-for="(item, index) in filterValue.length > 0
                      ? filterData
                      : admins"
                    :key="index"
                  >
                    <p class="members-first-name">{{ item.capitalInitial }}</p>
                    <div class="itemList">
                      <div>
                        <div class="face">{{ item.realName.substr(-2) }}</div>
                        <span>{{ item.realName }}</span>
                      </div>
                      <el-checkbox
                        @change="(event) => changeCheckBox(event, item)"
                        :value="
                          checkList.findIndex((o) => o.id === item.id) !== -1
                        "
                        :disabled="
                          userGroupList.findIndex((o) => o.id === item.id) !==
                          -1
                        "
                      ></el-checkbox>
                    </div>
                  </div>
                </div>
              </div>
              <div class="members-right">
                <span class="members-selected-count">
                  已选择了{{ checkList.length }}个联系人
                </span>
                <div class="members-selected-list">
                  <div
                    class="selected-members-item"
                    v-for="(item, index) in checkList"
                    :key="index"
                  >
                    <div class="members-selected-info">
                      <div class="members-selected-avatar">
                        {{ item.realName.substr(-2) }}
                      </div>
                      <span class="title">{{ item.realName }}</span>
                    </div>
                    <i
                      class="el-icon-circle-close"
                      style="font-size: 18px; color: #999"
                      @click="cancelMembers(item)"
                    ></i>
                  </div>
                </div>
                <div slot="footer">
                  <el-button size="mini" @click="handleClose">取 消</el-button>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleUserGroupAccount"
                    style="text-align: center"
                    >确 定</el-button
                  >
                </div>
              </div>
            </div>
            <el-dialog
              width="23%"
              height="calc(100% - 385px)"
              style="text-align: center; left: 60px"
              :modal="false"
              title="设置群名"
              :visible.sync="innerVisible"
              append-to-body
            >
              <div>
                <el-input
                  v-model="userGroupValue"
                  maxlength="50"
                  show-word-limit
                  size="small"
                ></el-input>
              </div>
              <el-button
                type="primary"
                style="margin-top: 20px"
                size="small"
                @click="elastic"
              >
                确定</el-button
              >
            </el-dialog>
            <!-- <div slot="footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="innerVisible = true"
                style="text-align: center"
                >确 定</el-button
              >
            </div> -->
          </el-dialog>
        </div>
      </div>
      <div class="history" @click="getRecord(0)">
        <span>聊天记录</span>
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="topping">
        <el-switch
          v-model="status"
          inactive-text="置顶聊天"
          active-color="#ddd"
          inactive-color="#13ce66"
          :inactive-value="true"
          :active-value="false"
          style="
            width: 100%;
            display: flex;
            padding: 10px 20px 20px 0;
            justify-content: space-between;
          "
          @change="top"
        >
        </el-switch>
        <el-switch
          v-model="noReminderStatus"
          inactive-text="消息免打扰"
          active-color="#ddd"
          inactive-color="#13ce66"
          :inactive-value="true"
          :active-value="false"
          style="
            width: 100%;
            display: flex;
            padding-right: 20px;
            justify-content: space-between;
          "
          @change="handleNoReminder"
        >
        </el-switch>
      </div>
      <div class="empty">
        <el-button type="text" @click="open">清空聊天记录</el-button>
        <br />
        <el-button
          v-if="this.current_contact.type === 3"
          type="text"
          @click="handleUserGroup"
          >退出群聊</el-button
        >
      </div>
    </div>
    <el-dialog
      class="chat-record-dialog"
      width="500px"
      height="600px"
      top="25px"
      :visible.sync="dialogTableVisible"
      :modal="false"
      append-to-body
      @close="handleDialogeClose"
    >
      <div class="chat-record-header">
        <div class="record-header-text">聊天记录</div>
        <div class="record-header-search">
          <el-input
            size="small"
            clearable
            prefix-icon="el-icon-search"
            v-model="value"
            @input="searchMessage(type)"
          />
        </div>
      </div>
      <div class="chat-record-content">
        <i class="el-icon-loading" v-show="recordLoading"></i>
        <!-- recordPageId === 2 显示查看上下文， 1 显示 tabs -->
        <div class="chat-record-ctx" v-show="recordPageId === 2">
          <div class="chat-record-ctx-header">
            <el-link
              type="primary"
              icon="el-icon-arrow-left"
              @click="handleBack"
              >返回</el-link
            >
          </div>
          <div class="chat-record-ctx-content">
            <base-record-group ref="wrapRef">
              <base-record-item
                v-for="item in contextRecords"
                v-show="
                  item.type !== 4 &&
                  item.type !== 5 &&
                  item.retractionTime == null
                "
                :key="item.id"
                :title="item.fromUserRealName"
                :content="item.content"
                :filePath="item.filePath"
                :create-at="item.createTime"
                :type="item.type"
                :show-context="value"
                @clickContext="clickContext(item)"
                :style="currentContextId == item.id && 'background: #eee;'"
              ></base-record-item>
            </base-record-group>
          </div>
        </div>
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          v-show="recordPageId === 1"
        >
          <div class="piecesNumber" v-show="value.length > 0">
            {{ allRecords.length }}条与"{{ value }}"相关的信息
          </div>
          <el-tab-pane label="全部" name="0">
            <base-record-group ref="recordGroupRef">
              <el-empty
                v-show="allRecords.length === 0 && !recordLoading"
                :image-size="200"
              ></el-empty>
              <base-record-item
                v-for="item in allRecords"
                :key="item.id"
                v-show="
                  item.type !== 4 &&
                  item.type !== 5 &&
                  item.retractionTime == null
                "
                :title="item.fromUserRealName"
                :content="item.content"
                :filePath="item.filePath"
                :create-at="item.createTime"
                :type="item.type"
                ref="recordRef"
                @clickContext="clickContext(item)"
              >
                <div
                  class="base-record-item-link"
                  v-show="value.length > 0"
                  @click="clickContext(item)"
                >
                  <a>查看上下文</a>
                </div>
              </base-record-item>
            </base-record-group>
          </el-tab-pane>
          <el-tab-pane label="文件" name="2">
            <base-record-group>
              <el-empty
                v-show="fileRecords.length === 0 && !recordLoading"
                :image-size="200"
              ></el-empty>
              <base-record-item
                v-for="item in fileRecords"
                v-show="
                  item.type !== 4 &&
                  item.type !== 5 &&
                  item.retractionTime == null
                "
                :key="item.id"
                :title="item.fromUserRealName"
                :filePath="item.filePath"
                :create-at="item.createTime"
                :type="item.type"
                ref="recordRef"
              ></base-record-item>
            </base-record-group>
          </el-tab-pane>
          <el-tab-pane label="图片" name="3" class="imageList">
            <!-- <el-empty
              v-show="imageRecords.length === 0 && !recordLoading"
              :image-size="200"
            ></el-empty> -->
            <div>
              <div
                v-for="(key, index) in Object.keys(imageRecords)"
                :key="index"
              >
                <div style="margin: 5px 0 5px 18px">{{ key }}</div>
                <div>
                  <el-image
                    v-for="item in imageRecords[key]"
                    v-show="
                      item.type !== 4 &&
                      item.type !== 5 &&
                      item.retractionTime == null
                    "
                    :key="item.id"
                    style="width: 100px; height: 100px; margin-left: 20px"
                    :src="item.filePath && item.filePath.replace('blob:', '')"
                    :preview-src-list="
                      imageRecords[key].map((obj) => obj.filePath)
                    "
                    @click="checkImage"
                  />
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
@import "../styles/mixin.less";
.members-box {
  display: flex;
  height: 100%;
  .members-left {
    flex: 1;
    border-right: solid 1px #eee;
    background: #fff;
    padding: 20px 20px 0 0;
    .members-filter {
    }
    .members-list {
      overflow-y: auto;
      margin-top: 10px;
      height: calc(100% - 51px);
      .members-first-name {
        width: 20px;
        color: #666;
        margin-bottom: 10px;
        text-align: center;
        background-color: #ebebeb;
      }
      .itemList {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .members-right {
    width: 100%;
    padding: 20px 0 0 20px;
    overflow-y: auto;
    flex: 1;
    .members-selected-list {
      height: calc(100% - 70px);
      overflow-y: auto;
    }
    .members-selected-count {
      font-size: 12px;
      color: #333;
      margin-bottom: 10px;
      display: inline-block;
    }
    .selected-members-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-size: 12px;
      .members-selected-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .members-selected-avatar {
        width: 32px;
        height: 32px;
        border: 1px solid #ddd;
        background-image: url(../assets/head.png);
        background-size: 100%;
        color: #fff;
        text-align: center;
        line-height: 32px;
      }
    }
  }
}

.slot-group {
  width: 240px;
  background: #fff;
  border-left: 0;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid #ebebf2;
  .sidebar-content {
    height: calc(100% - 59px);
  }
  .sidebar-footer {
    display: flex;
    justify-content: center;
  }
}
.lemon-vessel__right {
  border-left: 1px solid #ddd;
}

.slot-group {
  height: 100%;
  position: relative;

  .slot-search {
    margin: 5px 0;
  }

  .top {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    border-bottom: 1px solid #ddd;
    .button {
      display: flex;
      justify-content: space-around;
    }
  }

  .btn {
    width: 96px;
    height: 38px;
    background: #f8f8f9;
    border-radius: 4px;
  }
  .Cclass {
    border-color: #409eff;
    color: #409eff;
  }

  .CommonReply {
    height: 40px;

    div {
      line-height: 40px;
      margin-left: 22px;
    }
  }

  .information {
    height: calc(100% - 80px);
    max-height: calc(100% - 80px);
    background: #f8f8f9;
    border-bottom: 1px solid #ddd;
    position: relative;
    border-top: 1px solid #ddd;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
    .speak {
      border: 1px solid #eee;
      background-color: #fff;
      display: flex;
      position: relative;
      padding: 10px;
      margin-bottom: 10px;
      .num {
        margin: 0 5px;
      }

      p {
        width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .tool {
      }
      span {
        white-space: nowrap;
        // text-overflow: ellipsis;
        // overflow: hidden;
      }
    }
  }

  .card {
    width: 230px;
    height: 249px;
    background: #ffffff;
    border: 1px solid #bbbbbb;
    box-shadow: 0px 7px 14px 2px rgba(64, 64, 64, 0.18);
    border-radius: 10px;
    position: absolute;
    top: 150px;
    left: 5px;
    .card-top {
      line-height: 1;
      margin: 0 5px;
    }
    .menu {
      margin-top: 10px;
      .group {
        margin-left: 15px;
      }

      .content {
        margin-left: 11px;
        margin-top: 5px;
      }
    }
  }

  .X {
    margin: 17px 17px 0 0;
    float: right;
  }

  .add {
    width: 73px;
    height: 17px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .bottom {
    display: flex;
    justify-content: end;
    margin-top: 20px;
    flex-direction: row-reverse;
    // margin-left: 64px;
    .cancel {
      margin: 0 5px;
    }
  }

  .assistant {
    display: flex;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-left: 20px;

    .assistant-group {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
    }
    .group-members-item {
      margin-right: 10px;
      margin-bottom: 10px;
      .add-group-btn {
        background-color: #ebebeb;
      }
    }

    .pic {
      width: 36px;
      height: 36px;
      background-image: url(../assets/head.png);
      background-size: 100%;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      line-height: 36px;
      text-align: center;
    }

    .surname {
      font-size: 12px;
      font-weight: 400;
      color: #666666;
      margin-top: 2px;
      text-align: center;
    }
  }

  .history {
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ddd;
    padding: 10px 20px;
    color: #333;
    /deep/ .el-dialog {
      position: fixed;
      left: 387px;
      width: 590px;
      height: 600px;
    }

    /deep/ .el-form-item__content {
      margin-left: none !important;
    }

    .message {
      .el-tab-pane {
        display: flex;
      }
      .message-avatar {
        width: 42px;
        height: 42px;
        border: 1px #eee solid;
        text-align: center;
        line-height: 42px;
        color: #fff;
        background-image: url(../assets/head.png);
        background-size: 100%;
      }
    }
  }

  .topping {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    flex-wrap: wrap;
  }

  .empty {
    text-align: center;
    color: red;
    margin-top: 25px;
  }

  .upload {
    /deep/ .el-dialog {
      .el-dialog__header {
        padding: 0;
      }
      position: relative;
      left: 15px;
      height: calc(100vh - 124px);
      background: #ffffff;
      border: 1px solid #bbbbbb;
      box-shadow: 0px 7px 14px 2px rgb(64 64 64 / 18%);
      border-radius: 10px;
      margin-top: 25px;
    }

    /deep/ .el-dialog__body {
      padding-top: 0;
      padding-bottom: 0;
      height: 100%;
    }

    /deep/ .el-dialog__footer {
      padding: 0 !important;
    }

    /deep/ .el-divider--vertical {
      height: 505px;
    }

    .face {
      width: 32px;
      height: 32px;
      border: 1px solid #ddd;
      background-image: url(../assets/head.png);
      background-size: 100%;
      float: left;
      color: #fff;
      text-align: center;
      line-height: 32px;
      font-size: 12px;
    }

    span {
      line-height: 2;
      margin-left: 5px;
    }

    /deep/ .el-dialog__footer {
      padding-top: 0px;
    }
    /deep/ .el-checkbox {
      // float: right;
      width: 20px;
      height: 20px;
    }
    /deep/ .el-checkbox__inner {
      border-radius: 50%;
    }

    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #3abf8f;
      border-color: #3abf8f;
    }

    /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #dcdfe6;
    }
  }
  /deep/ .el-message-box__container {
    text-align: center;
  }
  .add1 {
    position: absolute;
    top: 44px;
    left: 3px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #999;
    width: 33px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    border: 1px solid #ddd;
    cursor: pointer;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
<style lang="less">
.el-button--small {
  padding-left: 35px !important;
  padding-right: 35px !important;
}
.el-message-box__btns {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
}
.chat-record-dialog {
  .el-dialog__body {
    padding-top: 0;
  }
  .chat-record-header {
    .record-header-text {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      margin-bottom: 20px;
    }
    .record-header-search {
      padding: 0 20px;
      .el-input__inner {
        background: #f8f8f9;
        border: 1px solid #ebebf2;
      }
    }
  }
  .chat-record-content {
    position: relative;
    .el-icon-loading {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 20px;
      height: 20px;
      font-size: 20px;
    }
    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
      .el-tabs__item {
        padding: 0 40px;
      }
      .el-tabs__item.is-top:nth-child(2) {
        padding-left: 0;
      }
    }
    .el-tabs__nav-wrap::after {
      height: 0;
    }
    .imageList {
      height: 400px;
      overflow: auto;
    }
  }
  .chat-record-ctx {
    .chat-record-ctx-header {
      padding: 20px 0;
    }
    .chat-record-ctx-content {
    }
  }
  .piecesNumber {
    text-align: center;
  }
}
</style>
<style>
.msgBox {
  width: 25% !important;
}
</style>